<template>
  <div>
    <search-bar @search="searchClick"></search-bar>
    <group title="待添加 ">
      <cell v-for="item in alternativeList" :key="item.id" :title="item.nick">
        <img class="icon" slot="icon" :src="item.figure || defaultIcon" alt="头像">
        <button class="add_btn" slot="default" @click="addClick(item.id)">添加</button>
      </cell>
    </group>
  </div>
</template>
<script>
import { Group, Cell } from "vux";
import SearchBar from "../../../components/common/SearchBar.vue";
export default {
  data() {
    return {
      alternativeList: [],
      defaultIcon: require("../../../images/morentouxiang1.png")
    };
  },
  components: {
    Group,
    Cell,
    SearchBar
  },
  created() {
    this.apiService.whiteuser.willaddplayerlist().then(res => {
      this.alternativeList = res.data.willaddplayerlist;
    });
  },
  methods: {
    addClick(id) {
      this.apiService.whiteuser
        .addwhiteuser({
          playerids: [id]
        })
        .then(res => {
          this.$vux.toast.text("添加成功，请返回前一页查看");
        });
    },
    searchClick(info) {
      let _this = this;
      this.apiService.user
        .getplayerinfo({
          playerid: info
        })
        .then(res => {
          this.$vux.confirm.show({
            title: "添加到自建房",
            content: `你确定将${res.data.nick}添加到自建房白名单中么？`,
            onConfirm() {
              _this.apiService.whiteuser
                .addwhiteuser({
                  playerids: [info]
                })
                .then(ress => {
                  _this.$vux.toast.text("添加成功，请返回前一页查看");
                });
            }
          });
        });
    }
  }
};
</script>
<style scoped>
.icon {
  height: 0.7rem;
  width: 0.7rem;
  margin-right: 0.23rem;
}
.add_btn {
  background-color: #00ac34;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 0.1rem;
  color: #fff;
  font-size: 0.32rem;
  padding: 0.15rem 0.45rem;
}
</style>


